<template>
  <el-table :data="userList" stripe
            :header-cell-style="{textAlign:'center'}"
            :cell-style="{textAlign:'center'}"
            @selection-change="handleSelectionChange"
  >
    <el-table-column prop="id" label="#" width="60px"/>
    <el-table-column type="selection"/>
    <el-table-column prop="username" label="员工编号"/>
    <el-table-column prop="name" label="员工名称"/>
    <el-table-column prop="role" label="角色"/>
    <el-table-column prop="gender" label="性别">
      <template #default="scope">
        {{ scope.row.gender === 1 ? '男' : '女' }}
      </template>
    </el-table-column>
    <el-table-column prop="phone" label="联系方式"/>
    <el-table-column prop="status" label="是否有效">
      <template #default="scope">
        {{ scope.row.status === 1 ? '是' : '否' }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button :icon="EditPen" size="mini" @click="handleEdit(scope.row)" style="border: none;"></el-button>
        <el-button :icon="Delete" size="mini" @click="handleDelete(scope.row)" style="border: none;"></el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      style="float: right"
      v-model:current-page="queryForm.page"
      v-model:page-size="queryForm.pageSize"
      background
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryForm.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>

<script setup>
import {Delete, EditPen} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {deleteUser, queryUserById} from '@/api/user/user.js';

const props = defineProps({
  userList: Array,
  queryForm: Object
});

const emit = defineEmits(['edit', 'delete', 'size-change', 'current-change', 'selection-change']);

const handleEdit = (row) => {
  emit('edit', row);
};

const handleDelete = async (row) => {
  try {
    let result = await deleteUser(row.id);
    if (result.code) {
      ElMessage.success('删除成功');
      emit('delete');
    } else {
      ElMessage.error('删除失败');
    }
  } catch (error) {
    ElMessage.error('删除失败：' + error.message);
  }
};

const handleSizeChange = (val) => {
  emit('size-change', val);
};

const handleCurrentChange = (val) => {
  emit('current-change', val);
};

const handleSelectionChange = (selection) => {
  emit('selection-change', selection);
};
</script>

<style scoped>
.el-table-column {
  text-align: center;
}

.el-button {
  border: 1px solid #dcdfe6;
  width: 15px;
  border-radius: 100%;
  box-shadow: 0 5px 5px #dcdfe6;
}

.el-button:hover {
  background-color: #f6f6f6;
}
</style>